<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Chat Box with Vue</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <h1>Chat Box</h1>
  <div class="chat-container">
    <div v-for="(message, index) in messages" :key="index" class="message">
      <div v-if="message.type === 'user'">You: {{ message.text }}</div>
      <div v-else>Bot: {{ message.text }}</div>
    </div>
  </div>
  <label>
    <input type="text" v-model="newMessage" @keyup.enter="sendMessage">
  </label>
</div>

<script>
  let test=new Vue({
    el: '#app',
    data: {
      messages: [],
      newMessage: ''
    },
    methods: {
      sendMessage() {
        if (this.newMessage.trim() === '') return;

        this.messages.push({ type: 'user', text: this.newMessage });

        this.generatePrompt();

        this.newMessage = '';
      },
      generatePrompt() {
        const prompt = this.newMessage;
        fetch("/test/vivogpt?prompt=" + encodeURIComponent(prompt))
                .then(response => response.json())
                .then(data => {
                  this.messages.push({ type: 'bot', text: data.data.content });
                })
                .catch(error => {
                  console.error('Error:', error);
                })
      },
    }
  })
</script>
</body>
</html>
